<route>
{
meta: {
title: '个人实验室预约'
}
}
</route>

<template>
  <div class="app-container"
       style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
    <!-- style="margin-left: 20px;margin-top: 20px;" -->

    <el-row>
      <el-col :span="24">
        <el-form ref="queryFormRef"
                 :model="queryParams"
                 :inline="true"
                 label-width="90px">
          <el-form-item label="实验室名称"
                        prop="lab_site">
            <el-input v-model="queryParams.lab_site"
                      placeholder="请输入实验室名称"
                      clearable
                      @keyup.enter="handleQuery" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       :icon="Search"
                       round
                       plain
                       @click="handleQuery">
              搜索
            </el-button>
            <el-button :icon="Refresh"
                       round
                       plain
                       @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-divider>
      <el-icon>
        <star-filled />
      </el-icon>
    </el-divider>
    <el-table :data="labList">
      <el-table-column fixed=""
                       type="index"
                       label="序号"
                       :index="pageNum" />
      <el-table-column prop="lab_site"
                       label="实验室名称" />

      <el-table-column label="实验室类型"
                       prop="lab_type" />

      <el-table-column prop="lab_size"
                       label="实验室容量" />

      <el-table-column prop="lab_describe"
                       label="实验室描述" />

      <el-table-column fixed="right"
                       label="操作"
                       width="120">
        <template #default="scope">
          <el-button size="small"
                     type="success"
                     plain
                     @click="handleDetails(scope.row)">
            申请预约
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="page.total > 0"
                :total="page.total"
                v-model:page="page.pageNum"
                v-model:limit="page.pageSize"
                @pagination="getList" />


      <!-- 查看预约详情-->
      <el-dialog v-model="operForm.open"
                 title="选择预约日期："
                 width="500px"
                 append-to-body>
        <el-row>
          <el-col>
            <el-date-picker v-model="riqi"
                            placeholder="请选择日期"
                            type="date"
                            format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD"
                            :disabledDate='pickerOptions' />
            <el-select v-model="shijian"
                       placeholder="请选择时间"
                       style="margin-left: 10px;"
                       @change="handleQuery">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
          </el-col>
          <el-col style="margin-top: 30px;">
            <el-button type="primary"
                       :icon="Search"
                       plain
                       @click="submitAppointment()">
              查看
            </el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 选择座位-->
      <el-dialog v-model="operForm.selectSeatOpen"
                 title="选座确认"
                 width="800px"
                 append-to-body>
        <div style="margin-left: 20px; width: 600px;">
          <el-row>
            <el-col :span="16">
              <el-row v-for="(item,i) in seat"
                      :key="item"
                      :gutter="5"
                      class="el-row">
                <el-col v-for="(items,j) in item"
                        :key="items"
                        :span="4">
                  <div>
                    <el-button v-if="items==1||items==2"
                               type="danger"
                               multiline="true"
                               disabled
                               :icon="Avatar"
                               class="seat_btn"
                               plain />
                    <el-button v-else-if="items==0"
                               type="success"
                               class="seat_btn"
                               :icon="Avatar"
                               plain
                               @click="confirmAppointment(i,j)" />
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-card class="box-card"
                       style=" width: 300px;">
                确认预约信息<br>------------------------------------------<br><br>
                实验室名称：{{ operForm.lab_site }}<br><br><br>
                预约时间：{{ operForm.addAppointment.appointment_time }}<br><br><br>
                预约人：{{ operForm.addAppointment.appointment_user }}<br><br><br>
                预约位置：{{ parseInt((operForm.addAppointment.appointment_site||" ").split(',')[0])+1 }}排{{ parseInt((operForm.addAppointment.appointment_site||" ").split(',')[1])+1 }}列<br><br>

                <div class="dialog-footer">
                  <el-button type="primary"
                             @click="submitAddAppointment()">
                    确 定
                  </el-button>
                  <el-button @click="cancel">取 消</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {
  StarFilled,
  Edit,
  Share,
  Delete,
  Search,
  Upload,
  Refresh,
  Plus,
  User,
  Avatar,
} from '@element-plus/icons-vue'
import {
  defineComponent,
  onMounted,
  reactive,
  toRef,
  ref,
  computed,
  toRefs,
  getCurrentInstance,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'

const labList = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)
const total = ref(0)
const riqi = ref(null)
const shijian = ref(null)
// 日期选择
const options = [
  {
    value: '08:00:00',
    label: '08:00:00-10:00:00',
  },
  {
    value: '10:00:00',
    label: '10:00:00-12:00:00',
  },
  {
    value: '14:00:00',
    label: '14:00:00-16:00:00',
  },
  {
    value: '16:00:00',
    label: '16:00:00-18:00:00',
  },
]

/** 增加或修改表单数据 */
const operForm = ref({
  // 俩个表单控件
  open: false,
  selectSeatOpen: false,
  lab_site: undefined,
  // 添加预约信息
  addAppointment: {
    id: undefined,
    lab_id: undefined,
    appointment_time: undefined,
    appointment_user: undefined,
    appointment_type: undefined,
    appointment_flag: 0,
    appointment_site: '-1,-1',
  },
})

/** 查询条件 */
const queryParams = ref({
  lab_site: undefined,
  lab_type: '个人学习',
  use_flag: '1',
  pageNum: 1,
  pageSize: 10,
})
const page = ref({
  total: 1,
  currentpage: 1,
  pagesize: 10,
  pageNum: 1,
})
/** 获取表单数据*/
const getList = () => {
  loading.value = true
  console.log(queryParams.value)
  api
    .post('lab/selectLab/' + page.value.pageNum, queryParams.value)
    .then((res) => {
      page.value.total = res.data.total
      page.value.pagesize = res.data.pageSize
      loading.value = false
      labList.value = res.data.list
      console.log('tableData=', labList.value)
    })
}

/** 搜索按钮操作 */
function handleQuery() {
  pageNum.value = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/** 重置操作 */
const reset = () => {
  riqi.value = null
  shijian.value = null
}
// 当前日期
const nowDat = ref(1)
const seat = ref([
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0],
])

/** 详情按钮操作 */
const handleDetails = (row) => {
  reset()
  const id = row.id
  // 预约的第几天
  const nowDate = 1
  // 添加预约信息前置参数
  operForm.value.lab_site = row.lab_site
  operForm.value.addAppointment.lab_id = id
  operForm.value.addAppointment.appointment_type = row.lab_type
  operForm.value.addAppointment.appointment_user =
    localStorage.getItem('account')
  operForm.value.open = true
}
//限制日期选择
const pickerOptions = (time: Record<string, any>): boolean => {
  let curDate = new Date().getTime() //  获取当前时间点
  let seven = 7 * 24 * 60 * 60 * 1000 // 设定7天日期  7天 * 24小时 * 60分钟 * 60秒 * 1000 = 7天的时间戳
  let sevenDays = curDate + seven //  当前时间点后的七天所处的日期
  return time.getTime() < Date.now() || time.getTime() > sevenDays + 8.64e7 // 8.64e7 表示一天，明天之前包括明天不可选，只可选七天

  //   console.log(time); // time 为new Date()类型
  //   if (time.getTime() > new Date().getTime()) {
  //     return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
  //   } else {
  //     return time.getTime()< Date.now() -1 * 8.64e7; //8.64e7就是⼀天的时间戳 24*60*60*1000   两天之内根据⾃⼰需求来定
  //   }
}
/** 查看预约座位信息*/
const submitAppointment = () => {
  console.log('传值：' + shijian.value)
  operForm.value.selectSeatOpen = true
  // 添加预约日期信息

  const lab_id = operForm.value.addAppointment.lab_id
  //   const appointment_time = operForm.value.addAppointment.appointment_time
  const appointment_time = riqi.value + ' ' + shijian.value
  operForm.value.addAppointment.appointment_time = appointment_time
  api
    .post('labAppointment/selectPersonalLabSeat', { lab_id, appointment_time })
    .then((res) => {
      seat.value = res.data
      console.log(seat.value)
    })
}
/** 添加预约座位信息 */
const confirmAppointment = (i, j) => {
  const site = i + ',' + j
  operForm.value.addAppointment.appointment_site = site
  console.log('座位是' + operForm.value.addAppointment.appointment_site)
}

/** 提交预约表单 */
const submitAddAppointment = () => {
  operForm.value.addAppointment.appointment_flag = 1
  api
    .post('labAppointment/addAppointment', operForm.value.addAppointment)
    .then((res) => {
      ElMessage.success('预约成功，等待审核...........')

      operForm.value.selectSeatOpen = false
      operForm.value.open = false
      // handleDetails(operForm.value.addAppointment.lab_id)
    })
}

/** 取消按钮 */
function cancel() {
  operForm.value.selectSeatOpen = false
}

/** 获取日期 */
// 7天后日期
function getDay(day) {
  var today = new Date()
  // 也很简单
  var strtime = new Date()
  var date = new Date(strtime) // 传入一个时间格式，如果不传入就是获取现在的时间了，这样做不兼容火狐。
  var time2 = date.valueOf()
  var targetday_milliseconds = time2 + 1000 * 60 * 60 * 24 * day

  today.setTime(targetday_milliseconds) // 注意，这行是关键代码

  var tYear = today.getFullYear()
  var tMonth = today.getMonth()
  var tDate = today.getDate()
  tMonth = doHandleMonth(tMonth + 1)
  tDate = doHandleMonth(tDate)
  return tYear + '-' + tMonth + '-' + tDate
}
function doHandleMonth(month) {
  var m = month
  if (month.toString().length == 1) {
    m = '0' + month
  }
  return m
}

getList()
</script>
<style scoped>
.edit_btn {
  min-height: 90px;
  max-width: 150px;
  margin-left: 15px;
}
.seat_btn {
  min-height: 10px;
  max-width: 10px;
}
.el-row {
  margin-bottom: 20px;
}
</style>
